<template>
  <gzhb-page
    title="进度详情"
    btn-name="审批"
    :has-btn="false"
    @click="pageBtnClick">
    <gzhb-field
      label="任务名称："
      label-width="30%"
      @click="jinduShow = true">
      <van-field readonly slot="input" v-model="form.taskName" rows="1" autosize type="textarea" placeholder="" />
      <template slot="right">
        <span class="ui-icon ui-icon__more"></span>
      </template>
    </gzhb-field>
    <gzhb-field
      label="汇报时间："
      label-width="30%">
      <van-field readonly slot="input" v-model="form.rptDate" rows="1" autosize type="textarea" placeholder="" />
    </gzhb-field>
    <gzhb-field
      label="汇报内容："      
      label-width="30%">
      <van-field readonly slot="input" v-model="form.reportContent" rows="1" autosize type="textarea" placeholder="" />
    </gzhb-field>
    <gzhb-field
      label="存在问题："
      label-width="30%">
      <van-field readonly slot="input" v-model="form.problem" rows="1" autosize type="textarea" placeholder="" />
    </gzhb-field>
    <gzhb-field
      label="下一步措施："
      label-width="30%">
      <van-field readonly slot="input" v-model="form.nextStep" rows="1" autosize type="textarea" placeholder="" />
    </gzhb-field>
    <gzhb-field
      label="进度："
      label-width="30%">
      <van-field readonly slot="input" v-model="form.compPct + '%'" rows="1" autosize type="textarea" placeholder="" />
    </gzhb-field>
    <gzhb-field
      v-if="form.compPct == 100"
      label-width="30%"
      label="完成时间：">
      <van-field readonly slot="input" v-model="form.actualFinish" rows="1" autosize type="textarea" placeholder="" />
    </gzhb-field>
    <hr class="ui-hr" />
    <div class="ui-group">
      <div class="ui-group__title">附件列表</div>
      <div class="ui-group__body">
        <ul class="gzhb-fjlist">
          <li @click="download(item)" v-for="item in subTaskSubmits">
            <span class="ui-icon" :class="item.fileTyp | fileIcon"></span>
            <span class="desc">{{item.submitName}}</span>
            <span class="type">{{item.submitTyp | fileSubmitTyp}}</span>
          </li>
        </ul>
      </div>
    </div>  

        <!-- 进度详情弹窗 -->
    <gzhb-dialog
      :visible.sync="jinduShow"
      title="基本信息">
      <gzhb-field
        label="任务状态：">
        <van-field readonly rows="1" slot="input" v-model="form.statLabel" autosize type="textarea" placeholder='' />
      </gzhb-field>
      <gzhb-field
        label="结算类型：">
        <van-field readonly rows="1" slot="input" v-model="form.settleTypeName" autosize type="textarea" placeholder='' />
      </gzhb-field>
      <gzhb-field
        v-if="form.slaveDescription"
        label="任务描述：">
        <van-field readonly rows="1" slot="input" v-model="form.slaveDescription" autosize type="textarea" placeholder='' />
      </gzhb-field>
      <gzhb-field
        v-if="form.describe"
        label="交付物要求：">
        <van-field readonly rows="1" slot="input" v-model="form.describe" autosize type="textarea" placeholder='' />
      </gzhb-field>
    </gzhb-dialog>  
  </gzhb-page>
</template>

<script>
  import { downloadFile, utils_fileIcon, utils_fileType, utils_fileSubmitTyp }  from '@/utils/index.js'
  export default {
    data() {
      return {
        isLoading: false,
        jinduShow: false,
        subTaskSubmits: [],
        page: '',
        form: {
          taskName: '',
          rptDate: '',
          actualFinish: '',
          reportContent: '',
          problem: '',
          nextStep: '',
          compPct: '',
          statLabel: '',
          settleTypeName: '',
          slaveDescription: '',
          describe: ''
        },

        // 申请完成弹框
        isShowSubmitDialog: false
      }
    },
    created() {  
      // this.page = this.$route.query.page
      const data = JSON.parse(localStorage.getItem('fujian'))
      const masterTask = JSON.parse(localStorage.getItem('masterTask'))

      for (let p in this.form) {
        this.form[p] = data[p] || ''
      }

      this.form.rptDate = this.form.rptDate || ''
      masterTask.actualFinish = masterTask.actualFinish || ''
      
      this.subTaskSubmits = data.subTaskSubmits || []
      this.form.rptDate = this.form.rptDate.split(' ')[0]
      this.form.statLabel = masterTask.statLabel
      this.form.actualFinish = masterTask.actualFinish.split(' ')[0]
      this.form.settleTypeName = masterTask.settleTypeName
      this.form.slaveDescription = masterTask.slaveDescription
      this.form.describe = masterTask.describe
    },
    filters: {
      fileIcon: utils_fileIcon,
      fileType: utils_fileType,
      fileSubmitTyp: utils_fileSubmitTyp
    },
    methods: {
      // 点击审批按钮
      pageBtnClick(){
        this.isShowSubmitDialog = true
      },
      // 下载附件的地址
      download(item) {
        const url = `/taskManager/a/mobile/mobileMasterTaskDetails/downsubmit?submitId=` + item.id
        downloadFile(url, item.fileTyp)
      }
    }
  }
</script>